<template>
<div class="logo-bar" ref='content' v-if='config'>

    <div class="logo-bar-content"  :style='style' >
        <div @click='() =>{ goTo(index) }' class="logo-bar-item" ref='item' v-for='(item, index) of config' :key='index'>
            <div class="img-box">
                <img :src="item.logo" :alt="item.label">
            </div>            
        </div>
    </div>

    <span class="btn prev" @click='toPrev' >
        <i class="icon iconfont icon-left"></i>
    </span>
    <span class="btn next" @click='toNext' >
        <i class="icon iconfont icon-right"></i>
    </span>

</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop, Watch} from 'vue-property-decorator';


@Component
export default class Topbar extends Vue{

    current: number = 0
    position: number = 0 //当前位置
    itemW: number = 0 //元素宽度
    contentW: number = 0 //容器宽度
    min: number = 0 //最小移动距离
    max: number = 0 //最大移动距离
    len: number = 0 //长度
    direction: boolean = true  //移动方向

    @Prop()
    config?: Array<any>

    @Prop()
    preinstall?: number

    @Watch('preinstall')
    onChange(val:number){
        this.goTo(val)
    }

    get style(){
        return { transform: `translateX(${this.position * -1}px)` };
    }
    
    // 获取初始值
    mounted(){
        let refs = this.$refs;
        this.itemW = (refs.item as Array<HTMLElement>)[0].offsetWidth;
        this.contentW = (refs.content as HTMLElement).offsetWidth;

        let len = this.config ? this.config.length : 0;
        let w = this.offsetLeft(len) - this.contentW;
        this.max = w > 0 ? w : 0;
        this.len = len;
        
    }

    // 计算移动距离
    offsetLeft(index: number){
        return index * this.itemW;
    }

    // 定点
    goTo (index: number){

        if(index === this.current){
            return;
        }
        
        let config: any = this.config;
        let half = this.contentW/2;
        let position = this.offsetLeft(index);

        position -= half;

        if(position > 0){
            this.position = position;
        }else{
            this.position = 0;
        }

        if(position < this.max+half){
            this.position = position;
        }else{
            this.position = this.max + half;
        }

        // 上传事件
        this.$emit('change', {index, item: config[index], config})
        this.current = index;
    }

    

    //上移
    toPrev(){
      let current = this.position;

        let position = current - this.itemW;
        this.position = position > this.min ? position : 0;
       
    }

    // 下移
    toNext(){
        let current = this.position;

        let position = current + this.itemW;
        this.position = position < this.max ? position : this.max;

    }
    
}


</script>

<style scoped lang='less'>

.logo-bar{
    overflow: hidden;
    position: relative;
}

@conentH: 140*@rem;
.logo-bar-content{
    
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    height: @conentH;
    transition: all .5s;
    transform: translateX(0);
}

.logo-bar-item{
    @pd: 30*@rem;
    display: flex; 
    justify-content: center;
    align-items: center;
    width: @conentH;
    height: @conentH;
    .img-box{
        width: @conentH - @pd;
        height: @conentH - @pd;
    }
}


.btn{
    
    position: absolute;
    top: 0;
    bottom: 0;
    
    @size: 40*@rem;
    margin: auto;
    width: @size;
    height: @size;
    border-radius: 100%;
    background: rgba(182, 182, 182, .7);
    line-height: @size;
    text-align: center;
    font-size: @fontSizeLevel;
    font-weight: 600;
    color: @fontColorLight;

    z-index: 99;
}

.prev{
    left: 10*@rem;
}

.next{
    right: 10*@rem;
}


/* 768 */
@media (max-width: 768px){

@conentH: 100*@rem;
.logo-bar-content{
    height: @conentH;
}

.logo-bar-item{
    @pd: 20*@rem;
    width: @conentH;
    height: @conentH;
    .img-box{
        width: (@conentH - @pd)*2;
        height: @conentH - @pd;
    }
}
    

}

</style>